<template>
  <blank-card>
    <div class="wapper">
      <div class="wapper-operate">
        <div class="wapper-operate-title">房间信息</div>
        <div
          class="wapper-operate-con"
          v-for="(item, index) in state.floorList"
          :key="index"
        >
          <div @click="clickFloor(index)" class="wapper-operate-con-title">
            <span>{{ item.floor }}楼</span>
          </div>
          <div v-if="state.visibleRoom == index">
            <div
              v-for="(i, index) in item.floorRoom"
              :key="index"
              class="wapper-operate-con-room"
              @click="clickRoom(i)"
            >
              <span>{{ i.roomNumber }}室</span>
            </div>
          </div>
        </div>
      </div>
      <div class="wapper-content">
        <div class="wapper-content-column">
          <span>数据录入</span>
        </div>
        <entry-list :roomValue="state.roomValue"></entry-list>
      </div>
    </div>
  </blank-card>
</template>

<script lang="ts">
import BlankCard from "@/components/BlankCard/index.vue";
import EntryList from "@/components/entry/EntryList.vue";
import { defineComponent, onMounted, reactive } from "vue";
import { getGroupRoomList } from "@/api";

export default defineComponent({
  components: {
    BlankCard,
    EntryList,
  },
  setup() {
    const state = reactive({
      floorList: [] as any[],
      roomValue: {
        roomId: "",
        floor: "",
        roomNumber: "",
      },
      visibleRoom: 0,
    });
    const initRoomList = async () => {
      await getGroupRoomList().then((res) => {
        const floorData: any = [];
        res.sort((a: any, b: any) => {
          return a.roomNumber - b.roomNumber;
        });
        res.forEach((item: any) => {
          floorData.push(item.floor);
        });
        const floorDataList = Array.from(new Set(floorData));
        floorDataList.forEach((item: any) => {
          state.floorList.push({ floor: item, floorRoom: [] });
        });
        res.forEach((i: any) => {
          state.floorList.forEach((item: any) => {
            if (i.floor === item.floor) item.floorRoom.push(i);
          });
        });
        state.roomValue.roomId = state.floorList[0].floorRoom[0].id;
        state.roomValue.floor = state.floorList[0].floorRoom[0].floor;
        state.roomValue.roomNumber = state.floorList[0].floorRoom[0].roomNumber;
      });
    };
    // 点击楼层
    const clickFloor = (val: number) => {
      state.visibleRoom = val;
    };
    //点击房屋
    const clickRoom = (val: any) => {
      state.roomValue.roomId = val.id;
      state.roomValue.floor = val.floor;
      state.roomValue.roomNumber = val.roomNumber;
    };
    onMounted(() => {
      initRoomList();
    });
    return {
      state,
      clickRoom,
      clickFloor,
    };
  },
});
</script>

<style lang="scss">
.wapper {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  &-operate {
    width: 200px;
    border: 1px solid #eee;
    border-radius: 5px;
    &-title {
      width: 198;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #036eb8;
      border-bottom: 1px solid #eee;
      letter-spacing: 2px;
    }
    &-con {
      margin: 5px 0;
      &-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: #036eb8;
        cursor: pointer;
        span {
          font-size: 16x;
          font-weight: 500;
          color: #fff;
          padding-left: 20px;
          letter-spacing: 3px;
        }
      }
      &-room {
        background: #95b8e5;
        text-align: center;
        padding: 5px;
        margin-bottom: 2px;
        cursor: pointer;
        color: #fff;
      }
    }
  }
  &-content {
    width: 780px;
    border: 1px solid #eee;
    border-radius: 5px;
    &-column {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      span {
        padding-left: 20px;
        font-size: 20px;
        font-weight: bold;
        color: #036eb8;
        letter-spacing: 2px;
      }
    }
  }
}
</style>
